<template>
  <div id="bodypage">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/homePage' }"><span id="mainpage">主页</span></el-breadcrumb-item>
      <el-breadcrumb-item>绒质信息</el-breadcrumb-item>
      <el-breadcrumb-item><span>细度检测</span></el-breadcrumb-item>
    </el-breadcrumb>
    <div>
      <!-- 搜索页 -->
      <el-dialog title="请输入检索信息" v-dialogDrag :visible.sync="searchPage" width="970px" :before-close="handleClose" id="searchDialog">
        <p style="color: red; padding-bottom: 10px; font-size: 0.5rem;">若进行精确搜索请只填写羊只编号,若进行模糊搜索请将羊只编号留空</p>
        <el-form :model="searchData" :inline="true">
          <el-form-item label="羊只编号" label-width="100px">
            <el-input type="number" autocomplete="off" style="width: 189px;" v-model="searchData.sheepId"></el-input>
          </el-form-item>
          <el-form-item label="样品编号" label-width="100px">
            <el-input type="number" autocomplete="off" style="width: 189px;" v-model="searchData.specimen"></el-input>
          </el-form-item>
          <el-form-item label="直径" label-width="100px" style="margin-right: 0;">
            <el-input type="number" size="small" autocomplete="off" style="width: 83.5px;"
              v-model="searchData.diameterMin">
            </el-input>
          </el-form-item>
          <span style="margin: 0 5px; height: 40px; display: inline-block; line-height: 40px;">--</span>
          <el-form-item>
            <el-input type="number" size="small" autocomplete="off" style="width: 83.5px;"
              v-model="searchData.diameterMax">
            </el-input>
          </el-form-item>
          <el-form-item label="直径标准差" label-width="100px" style="margin-right: 0;">
            <el-input type="number" size="small" autocomplete="off" style="width: 83.5px;"
              v-model="searchData.diameter_differenceMin"></el-input>
          </el-form-item>
          <span style="margin: 0 5px; height: 40px; display: inline-block; line-height: 40px;">--</span>
          <el-form-item>
            <el-input type="number" size="small" autocomplete="off" style="width: 83.5px;"
              v-model="searchData.diameter_differenceMax"></el-input>
          </el-form-item>
          <el-form-item label="长度" label-width="100px" style="margin-right: 0;">
            <el-input type="number" size="small" autocomplete="off" style="width: 83.5px;"
              v-model="searchData.lengthMin"></el-input>
          </el-form-item>
          <span style="margin: 0 5px; height: 40px; display: inline-block; line-height: 40px;">--</span>
          <el-form-item>
            <el-input type="number" size="small" autocomplete="off" style="width: 83.5px;"
              v-model="searchData.lengthMax"></el-input>
          </el-form-item>
          <el-form-item label="长度标准差" label-width="100px" style="margin-right: 0;">
            <el-input type="number" size="small" autocomplete="off" style="width: 83.5px;"
              v-model="searchData.length_lengthMin">
            </el-input>
          </el-form-item>
          <span style="margin: 0 5px; height: 40px; display: inline-block; line-height: 40px;">--</span>
          <el-form-item>
            <el-input type="number" size="small" autocomplete="off" style="width: 83.5px;"
              v-model="searchData.length_lengthMax">
            </el-input>
          </el-form-item>
          <el-form-item label="长度变异系数" label-width="100px" style="margin-right: 0;">
            <el-input type="number" size="small" autocomplete="off" style="width: 83.5px;"
              v-model="searchData.length_codefficientMin"></el-input>
          </el-form-item>
          <span style="margin: 0 5px; height: 40px; display: inline-block; line-height: 40px;">--</span>
          <el-form-item>
            <el-input type="number" size="small" autocomplete="off" style="width: 83.5px;"
              v-model="searchData.length_codefficientMax"></el-input>
          </el-form-item>
          <el-form-item label="测量数" label-width="100px">
            <el-input type="number" autocomplete="off" style="width: 189px;" v-model="searchData.measurement_number">
            </el-input>
          </el-form-item>
          <el-form-item label="测量日期" label-width="100px">
            <el-input type="datetime-local" autocomplete="off" style="width: 189px;"
              v-model="searchData.measurement_date"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="searchPage = false">取 消</el-button>
          <el-button type="success" @click="searchInfo(1)" @keyup.enter.native="searchInfo(1)">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 新增页 -->
      <el-dialog title="羊绒细度检测表" v-dialogDrag :visible.sync="addPage" width="1000px" :before-close="handleClose">
        <el-form :inline="true" :model="inputValue">
          <el-form-item label="羊只编号" label-width="120px">
            <el-input type="number" v-model="inputValue.sheepId"></el-input>
          </el-form-item>
          <el-form-item label="样品编号" label-width="120px">
            <el-input type="number" v-model="inputValue.specimen"></el-input>
          </el-form-item>
          <el-form-item label="直径(μm)" label-width="120px">
            <el-input type="number" v-model="inputValue.diameter"></el-input>
          </el-form-item>
          <el-form-item label="直径标准差" label-width="120px">
            <el-input type="number" v-model="inputValue.diameter_difference"></el-input>
          </el-form-item>
          <el-form-item label="长度(mm)" label-width="120px">
            <el-input type="number" v-model="inputValue.length"></el-input>
          </el-form-item>
          <el-form-item label="长度标准差" label-width="120px">
            <el-input type="number" v-model="inputValue.length_length"></el-input>
          </el-form-item>
          <el-form-item label="长度变异系数(%)" label-width="120px">
            <el-input type="number" v-model="inputValue.length_codefficient"></el-input>
          </el-form-item>
          <el-form-item label="测量数" label-width="120px">
            <el-input type="number" v-model="inputValue.measurement_number"></el-input>
          </el-form-item>
          <el-form-item label="测量日期" label-width="120px">
            <el-input type="datetime-local" style="width: 187px;" v-model="inputValue.measurement_date"></el-input>
          </el-form-item>
          <el-form-item label="备注" label-width="120px">
            <el-input type="text" v-model="inputValue.remake"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addPage = false">取 消</el-button>
          <el-button type="success" @click="add">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 查看与编辑页 -->
      <el-dialog title="羊绒细度检测表" v-dialogDrag :visible.sync="checkPage" width="1000px" :before-close="handleClose">
        <el-form :inline="true" :model="row">
          <el-form-item label="直径(μm)" label-width="120px">
            <el-input type="number" v-model="row.DIAMETER"></el-input>
          </el-form-item>
          <el-form-item label="直径标准差" label-width="120px">
            <el-input type="number" v-model="row.D_DIFFERENCE"></el-input>
          </el-form-item>
          <el-form-item label="长度(mm)" label-width="120px">
            <el-input type="number" v-model="row.LENGTH"></el-input>
          </el-form-item>
          <el-form-item label="长度标准差" label-width="120px">
            <el-input type="number" v-model="row.L_DIFFERENCE"></el-input>
          </el-form-item>
          <el-form-item label="长度变异系数(%)" label-width="120px">
            <el-input type="number" v-model="row.L_CODEFFICIENT"></el-input>
          </el-form-item>
          <el-form-item label="测量数" label-width="120px">
            <el-input type="number" v-model="row.MEASUREMENT_NUMBER"></el-input>
          </el-form-item>
          <el-form-item label="测量日期" label-width="120px">
            <el-input type="datetime-local" style="width: 187px;" v-model="row.MEASUREMENT_DATE"></el-input>
          </el-form-item>
          <el-form-item label="备注" label-width="120px">
            <el-input type="text" v-model="row.REMARK"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button id="checkPageButton" type="danger" @click="update">修 改</el-button>
          <el-button type="success" @click="checkPage = false">关 闭</el-button>
        </span>
      </el-dialog>
      <div id="headerArea">
        <h2 style="margin:10px 0 10px 10px; display: inline-block;">羊绒细度检测表</h2>
        <div>
          <input v-show="false" ref="elementData" type="file" @change="importExcel(this)" />
          <el-button type="success" size="mini" @click="$refs.elementData.click()">导入
          </el-button>
          <el-button type="success" size="mini" style="margin-right: 15px;" @click="exportExcel">导出
          </el-button>
        </div>
      </div>
      <template>
        <!--这里v-if-->
        <el-button @click="addPage = true" round type="success" slot="append" icon="el-icon-edit"
          style="margin: 10px 10px 10px 10px;">新增</el-button>
        <el-button round type="success" slot="append" icon="el-icon-search" style="margin: 10px 0 10px 10px;"
          @click="searchPage = true">搜索</el-button>
      </template>
      <!-- 表格区 -->
      <el-table @sort-change="sortTable" max-height="400" :data="tableData"
        :header-cell-style="{background:'#f5f7fa',color:'#606266'}" border stripe @row-click="getDetails"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}" row-key="ID">
        <!--.slice((queryInfo.pagenum-1)*5,queryInfo.pagenum*5)-->
        <el-table-column type="selection" width="35"></el-table-column>
        <el-table-column width="80px"><template slot-scope="scope">{{scope.$index+1}}</template></el-table-column>
        <el-table-column type="expand">
          <div slot-scope="props" style="margin-left: 20px;">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="ID:">
                <span>{{ props.row.ID }}</span>
              </el-form-item>
              <el-form-item label="羊只编号:">
                <span>{{ props.row.SHEEP_ID }}</span>
              </el-form-item>
              <el-form-item label="样品编号:">
                <span>{{ props.row.SPECIMEN }}</span>
              </el-form-item>
            </el-form>
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="直径(μm):">
                <span>{{ props.row.DIAMETER }}</span>
              </el-form-item>
              <el-form-item label="直径标准差:">
                <span>{{ props.row.D_DIFFERENCE }}</span>
              </el-form-item>
              <el-form-item label="长度(mm):">
                <span>{{ props.row.LENGTH }}</span>
              </el-form-item>
            </el-form>
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="长度标准差:">
                <span>{{ props.row.L_DIFFERENCE }}</span>
              </el-form-item>
              <el-form-item label="长度变异系数(%):">
                <span>{{ props.row.L_CODEFFICIENT }}</span>
              </el-form-item>
              <el-form-item label="测量数:">
                <span>{{ props.row.MEASUREMENT_NUMBER }}</span>
              </el-form-item>
            </el-form>
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="测量日期:">
                <span>{{ props.row.MEASUREMENT_DATE }}</span>
              </el-form-item>
              <el-form-item label="备注:">
                <span>{{ props.row.REMARK }}</span>
              </el-form-item>
            </el-form>
          </div>
        </el-table-column>
        <el-table-column sortable="custom" prop="ID" label="ID" align="center"></el-table-column>
        <el-table-column sortable="custom" width="110px" prop="SHEEP_ID" label="个体编号" align="center"></el-table-column>
        <el-table-column sortable="custom" width="110px" prop="SPECIMEN" label="样品编号" align="center"></el-table-column>
        <el-table-column sortable="custom" width="110px" prop="DIAMETER" label="直径(μm)" align="center">
        </el-table-column>
        <el-table-column sortable="custom" width="120px" prop="D_DIFFERENCE" label="直径标准差" align="center">
        </el-table-column>
        <el-table-column sortable="custom" width="120px" prop="LENGTH" label="长度(mm)" align="center"></el-table-column>
        <el-table-column sortable="custom" width="120px" prop="L_DIFFERENCE" label="长度标准差" align="center">
        </el-table-column>
        <el-table-column sortable="custom" width="160px" prop="L_CODEFFICIENT" label="长度变异系数(%)" align="center">
        </el-table-column>
        <el-table-column sortable="custom" width="90px" prop="MEASUREMENT_NUMBER" label="测量数" align="center">
        </el-table-column>
        <el-table-column sortable="custom" width="200px" prop="MEASUREMENT_DATE" label="测量日期" align="center">
        </el-table-column>
        <el-table-column prop="REMARK" label="备注" align="center"></el-table-column>
        <!--              这里v-if-->
        <el-table-column prop="Operate" label="操作" align="center" fixed="right" width="140">
          <template slot-scope="scope">
            <el-button-group>
              <el-tooltip class="item" effect="dark" content="查看编辑" placement="top-start" :enterable="false">
                <el-button @click="checkPage = true" type="success" icon="el-icon-edit"></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除此行" placement="top-end" :enterable="false">
                <el-button type="success" icon="el-icon-delete"
                  @click="delteleItem(scope.row.ID, scope.row.SHEEP_ID, scope.row.SPECIMEN)"></el-button>
              </el-tooltip>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination style="padding-right: 0;" prev-text="上一页" next-text="下一页" @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum" layout="total, prev, pager, next, jumper" :total="queryInfo.total">
      </el-pagination>
    </div>
    <h2 v-show="searchBySheepId" style="text-align: center; margin: 3.125rem; color: #000; font-size: 2.1875rem;">
      羊只羊绒细度信息分析图</h2>
    <div ref="lineCharts" style="margin: auto; margin-bottom: 3.125rem;"></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        searchData: {
          sheepId: '',    //羊只编号
          //精确查找，只传羊只编号参数
          //模糊查询，不传羊只编号参数。下面可选填，但不可全不传
          specimen: '',   //样品编号
          diameterMax: '',   //直径最大值
          diameterMin: '',    //直径最小值
          diameter_differenceMax: '', //直径标准差最大值
          diameter_differenceMin: '', //直径标准差最小值
          lengthMax: '',     //长度最大值
          lengthMin: '',      //长度最小值v
          length_lengthMax: '',  //长度标准差最大值
          length_lengthMin: '',  //长度标准差最小值
          length_codefficientMax: '',     //长度变异系数最大值
          length_codefficientMin: '',       //长度变异系数最小值
          measurement_number: '',     //测量数
          measurement_date: '',       //测量日期
        },
        tableData: [],
        searchPage: false,
        addPage: false,
        checkPage: false,
        row: {},
        inputValue: {
          sheepId: '',                        //羊只编号
          specimen: '',                       //样品编号
          diameter: '',                       //直径
          diameter_difference: '',            //直径标准差
          length: '',                         //长度
          length_length: '',                  //长度标准差
          length_codefficient: '',            //长度变异系数
          measurement_number: '',             //测量数
          measurement_date: '',               //测量日期
          remake: '',                         //备注
        },
        queryInfo: {
          pagenum: 1, // 当前页码
          total: 0
        },
        isSearch: false,
        searchBySheepId: false,
        sortValue: {
          sortLowNum: '',
          ISAsc: ''
        },
        isTurnThePage: false,
        exportData: null
      }
    },
    mounted() {
      this.handleRequestGetInfo(1)
    },
    activated() {
      if (this.$store.state.diameterMax && this.$store.state.diameterMin) {
        this.searchData.diameterMax = this.$store.state.diameterMax;
        this.searchData.diameterMin = this.$store.state.diameterMin;
        this.searchInfo(1)
        this.$store.commit("emptyDiameter"); //重置vuex里存储的羊只编号
      }
    },
    methods: {
      // 排序
      sortTable({ column, prop, order }) {
        switch (prop) {
          case 'ID': this.sortValue.sortLowNum = 1; break;
          case 'SHEEP_ID': this.sortValue.sortLowNum = 2; break;
          case 'SPECIMEN': this.sortValue.sortLowNum = 3; break;
          case 'DIAMETER': this.sortValue.sortLowNum = 4; break;
          case 'D_DIFFERENCE': this.sortValue.sortLowNum = 5; break;
          case 'LENGTH': this.sortValue.sortLowNum = 6; break;
          case 'L_DIFFERENCE': this.sortValue.sortLowNum = 7; break;
          case 'L_CODEFFICIENT': this.sortValue.sortLowNum = 8; break;
          case 'MEASUREMENT_NUMBER': this.sortValue.sortLowNum = 9; break;
          case 'MEASUREMENT_DATE': this.sortValue.sortLowNum = 10; break;
        }
        if (order == "ascending") {
          this.sortValue.ISAsc = 1;
          // console.log("升序了");
        } else if (order == "descending") {
          this.sortValue.ISAsc = 0;
          // console.log("降序了");
        } else {
          this.sortValue.ISAsc = '';
          // console.log("取消排序");
        }
        Object.keys(this.searchData).forEach(key => { if (this.searchData[key] != '') this.isSearch = true })
        if (this.isSearch) this.searchInfo(1)
        else this.handleRequestGetInfo(1)
      },
      //进入页面默认加载
      async handleRequestGetInfo(isPage) {
        let { data } = await this.$axios({
          method: 'post',
          url: '/RZtest/rongInfo',
          data: {
            sortLowNum: this.sortValue.sortLowNum,
            ISAsc: this.sortValue.ISAsc,
            page: this.queryInfo.pagenum,
            isPage: isPage
          }
        })
        //如果获取成功
        if (data.code === 0) {
          // this.$message({
          //   type: 'success',
          //   message: data.msg,
          //   duration: 1500
          // })
        } else {
          //获取失败
          return this.$message({
            type: 'error',
            message: data.msg,
            duration: 1500
          })
        }
        if (data.data.userInfo.admin < 1) {
          // 渲染行中行
          const thisYearArr = data.data.result.filter(obj => {
            return Number(obj.MEASUREMENT_DATE.slice(0, 4)) == Number(this.$moment().format("YYYY"))
          })
          const preYearArr = data.data.result.filter(obj => {
            return Number(obj.MEASUREMENT_DATE.slice(0, 4)) < Number(this.$moment().format("YYYY"))
          })
          for (let thisYearIndex = 0; thisYearIndex < thisYearArr.length; thisYearIndex++) {
            // 若一个羊只有多个当前年份的数据,则只渲染第一个当前年份的行中行,以防标识符重复而产生冲突
            if (thisYearIndex == 0) {
              const tempArr = preYearArr.filter(goatObj => {
                return thisYearArr[thisYearIndex].SHEEP_ID == goatObj.SHEEP_ID
              })
              thisYearArr[thisYearIndex].children = tempArr
            } else {
              if (thisYearArr[thisYearIndex].SHEEP_ID != thisYearArr[thisYearIndex - 1].SHEEP_ID) {
                const tempArr = preYearArr.filter(goatObj => {
                  return thisYearArr[thisYearIndex].SHEEP_ID == goatObj.SHEEP_ID
                })
                thisYearArr[thisYearIndex].children = tempArr
              }
            }
          }
          // thisYearArr[0].children = preYearArr
          this.tableData = thisYearArr
          // console.log(thisYearArr);
          // console.log(preYearArr);
          this.queryInfo.total = data.data.countAll
        }

      },
      //查询
      async searchInfo(isPage) {
        //如果不是进行翻页
        if (this.isTurnThePage) {
          this.sortValue.sortLowNum = ''
          this.sortValue.ISAsc = ''
          this.queryInfo.pagenum = 1
        }
        this.isTurnThePage = false
        console.log(this.sortValue.sortLowNum, this.sortValue.ISAsc, isPage);
        let { data } = await this.$axios({
          method: 'post',
          url: '/RZtest/rongInfo/find',
          data: {
            sheepId: this.searchData.sheepId,    //羊只编号
            //精确查找，只传羊只编号参数
            //模糊查询，不传羊只编号参数。下面可选填，但不可全不传
            specimen: this.searchData.specimen,   //样品编号
            diameterMax: this.searchData.diameterMax,   //直径最大值
            diameterMin: this.searchData.diameterMin,    //直径最小值
            diameter_differenceMax: this.searchData.diameter_differenceMax, //直径标准差最大值
            diameter_differenceMin: this.searchData.diameter_differenceMin, //直径标准差最小值
            lengthMax: this.searchData.lengthMax,     //长度最大值
            lengthMin: this.searchData.lengthMin,      //长度最小值v
            length_lengthMax: this.searchData.length_lengthMax,  //长度标准差最大值
            length_lengthMin: this.searchData.length_lengthMin,  //长度标准差最小值
            length_codefficientMax: this.searchData.length_codefficientMax,     //长度变异系数最大值
            length_codefficientMin: this.searchData.length_codefficientMin,       //长度变异系数最小值
            measurement_number: this.searchData.measurement_number,     //测量数
            measurement_date: this.searchData.measurement_date,       //测量日期
            sortLowNum: this.sortValue.sortLowNum,   //第几列的排序数，从左往右，从1开始
            ISAsc: this.sortValue.ISAsc,         //增还是减  1为增，0为减
            page: this.queryInfo.pagenum,          //页码
            isPage: isPage
          }
        })
        //如果查询成功
        if (data.code === 0) {
          // this.$message({
          //   type: 'success',
          //   message: data.msg,
          //   duration: 1500
          // })
        } else {
          //查询失败
          return this.$message({
            type: 'error',
            message: data.msg,
            duration: 1500
          })
        }
        console.log(data);
        this.searchPage = false
        this.tableData = data.date.result2
        this.queryInfo.total = data.date.countAll
        if (this.searchData.sheepId) {
          this.handleData(data.date.result2)
        } else {
          this.searchBySheepId = false
        }
      },

      //新增
      async add() {
        console.log(this.inputValue);
        console.log("添加开始");
        let { data } = await this.$axios({
          method: 'post',
          url: '/RZtest/rongInfo/add/single',
          data: {
            //字段名需要全部都在，值可以为null
            sheepId: this.inputValue.sheepId,                        //羊只编号
            specimen: this.inputValue.specimen,                       //样品编号
            diameter: this.inputValue.diameter,                       //直径
            diameter_difference: this.inputValue.diameter_difference,            //直径标准差
            length: this.inputValue.length,                         //长度
            length_length: this.inputValue.length_length,                  //长度标准差
            length_codefficient: this.inputValue.length_codefficient,            //长度变异系数
            measurement_number: this.inputValue.measurement_number,             //测量数
            measurement_date: this.inputValue.measurement_date,               //测量日期
            remake: this.inputValue.remake,                         //备注
          }
        })
        console.log(data);
        console.log("添加结束");
        //如果添加成功
        if (data.code === 0) {
          this.$message({
            type: 'success',
            message: data.msg,
            duration: 1500
          })
        } else {
          //添加失败
          return this.$message({
            type: 'error',
            message: data.msg,
            duration: 1500
          })
        }
        this.addPage = false
        Object.keys(this.searchData).forEach(key => { if (this.searchData[key] != '') this.isSearch = true })
        if (this.isSearch) this.searchInfo(1)
        else this.handleRequestGetInfo(1)
      },

      //批量导入
      async importExcelData(excelData) {
        let { data } = await this.$axios({
          method: 'post',
          url: '/RZtest/rongInfo/add/batch',
          data: {
            arr: excelData
          }
        })
        //如果导入成功
        if (data.code === 0) {
          this.$message({
            type: 'success',
            message: data.msg,
            duration: 3000
          })
        } else {
          //导入失败
          return this.$message({
            type: 'error',
            message: data.msg,
            duration: 3000
          })
        }
        Object.keys(this.searchData).forEach(key => { if (this.searchData[key] != '') this.isSearch = true })
        if (this.isSearch) this.searchInfo(1)
        else this.handleRequestGetInfo(1)
      },

      // 删除当前行数据
      async delteleItem(ID, sheepId, specimen) {
        const confirmResult = await this.$messagebox.confirm('此操作将永久删除该信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).catch(err => err)
        if (confirmResult != "confirm") {
          return this.$message.info("已取消删除")
        }
        console.log();
        let { data } = await this.$axios({
          method: 'delete',
          url: '/RZtest/rongInfo/delete',
          data: {
            ID: ID,
            sheepId: sheepId,
            specimen: specimen

          }
        })
        //如果删除成功
        if (data.code === 0) {
          this.$message({
            type: 'success',
            message: data.msg,
            duration: 1500
          })
        } else {
          //删除失败
          return this.$message({
            type: 'error',
            message: data.msg,
            duration: 1500
          })
        }
        Object.keys(this.searchData).forEach(key => { if (this.searchData[key] != '') this.isSearch = true })
        if (this.isSearch) this.searchInfo(1)
        else this.handleRequestGetInfo(1)
      },

      //编辑更新
      async update() {
        console.log("更新开始");
        console.log(this.row);
        let { data } = await this.$axios({
          method: 'post',
          url: '/RZtest/rongInfo/update',
          data: {
            ID: this.row.ID,  						  //绒质信息编号
            sheepId: this.row.SHEEP_ID,                        //羊只编号
            specimen: this.row.SPECIMEN,                       //样品编号
            //上面参数为索引参数，不可以修改
            //下面参数为修改参数，可以修改必须有值
            diameter: this.row.DIAMETER,                       //直径
            diameter_difference: this.row.D_DIFFERENCE,            //直径标准差
            length: this.row.LENGTH,                         //长度
            length_length: this.row.L_DIFFERENCE,                  //长度标准差
            length_codefficient: this.row.L_CODEFFICIENT,            //长度变异系数
            measurement_number: this.row.MEASUREMENT_NUMBER,             //测量数
            measurement_date: this.row.MEASUREMENT_DATE,               //测量日期
            remake: this.row.REMARK,                         //备注
          }
        })
        console.log("更新结束");
        console.log(data);
        //如果更新成功
        if (data.code === 0) {
          this.$message({
            type: 'success',
            message: data.msg,
            duration: 1500
          })
        } else {
          //更新失败
          return this.$message({
            type: 'error',
            message: data.msg,
            duration: 1500
          })
        }
        Object.keys(this.searchData).forEach(key => { if (this.searchData[key] != '') this.isSearch = true })
        if (this.isSearch) this.searchInfo(1)
        else this.handleRequestGetInfo(1)
        this.checkPage = false
      },

      //通用弹出框函数
      handleClose(done) {
        this.$messagebox.confirm('确认关闭？')
          .then(_ => { done() })
          .catch(_ => { })
      },

      // 改变页码值
      handleCurrentChange(newPage) {
        this.queryInfo.pagenum = newPage;
        Object.keys(this.searchData).forEach(key => { if (this.searchData[key] != '') this.isSearch = true })
        if (this.isSearch) {
          this.searchInfo(1)
          this.isTurnThePage = true
        }
        else {
          this.handleRequestGetInfo(1)
        }
      },

      //获取点击行数据并赋值给row
      getDetails(row) {
        this.row = JSON.parse(JSON.stringify(row)) // 调用JSON方法防止内存冲突
      },


      //导出Excel表格
      async exportExcel() {
        Object.keys(this.searchData).forEach(key => { if (this.searchData[key] != '') this.isSearch = true })
        if (this.isSearch) {
          let { data } = await this.$axios({
            method: 'post',
            url: '/RZtest/rongInfo/find',
            data: {
              sheepId: this.searchData.sheepId,    //羊只编号
              //精确查找，只传羊只编号参数
              //模糊查询，不传羊只编号参数。下面可选填，但不可全不传
              specimen: this.searchData.specimen,   //样品编号
              diameterMax: this.searchData.diameterMax,   //直径最大值
              diameterMin: this.searchData.diameterMin,    //直径最小值
              diameter_differenceMax: this.searchData.diameter_differenceMax, //直径标准差最大值
              diameter_differenceMin: this.searchData.diameter_differenceMin, //直径标准差最小值
              lengthMax: this.searchData.lengthMax,     //长度最大值
              lengthMin: this.searchData.lengthMin,      //长度最小值v
              length_lengthMax: this.searchData.length_lengthMax,  //长度标准差最大值
              length_lengthMin: this.searchData.length_lengthMin,  //长度标准差最小值
              length_codefficientMax: this.searchData.length_codefficientMax,     //长度变异系数最大值
              length_codefficientMin: this.searchData.length_codefficientMin,       //长度变异系数最小值
              measurement_number: this.searchData.measurement_number,     //测量数
              measurement_date: this.searchData.measurement_date,       //测量日期
              sortLowNum: this.sortValue.sortLowNum,   //第几列的排序数，从左往右，从1开始
              ISAsc: this.sortValue.ISAsc,         //增还是减  1为增，0为减
              page: this.queryInfo.pagenum,          //页码
              isPage: 0
            }
          })
          this.exportData = data.date.result2;
        }
        else {
          let { data } = await this.$axios({
            method: 'post',
            url: '/RZtest/rongInfo',
            data: {
              sortLowNum: this.sortValue.sortLowNum,
              ISAsc: this.sortValue.ISAsc,
              page: this.queryInfo.pagenum,
              isPage: 0
            }
          })
          this.exportData = data.data.result;
        }
        const exportData = JSON.parse(JSON.stringify(this.exportData).replace(/SHEEP_ID/g, "羊只编号")
          .replace(/SPECIMEN/g, "样品编号").replace(/DIAMETER/g, "直径").replace(/D_DIFFERENCE/g, "直径标准差")
          .replace(/LENGTH/g, "长度").replace(/L_DIFFERENCE/g, "长度标准差").replace(/L_CODEFFICIENT/g, "长度变异系数")
          .replace(/MEASUREMENT_NUMBER/g, "测量数").replace(/MEASUREMENT_DATE/g, "测量日期").replace(/REMARK/g, "备注"));
        // console.log(this.tableData);
        // console.log(obj);
        let data = exportData;
        //1. 新建一个工作簿
        let workbook = this.$XLSX.utils.book_new();
        //2. 把json对象转成工作表
        let sheet = this.$XLSX.utils.json_to_sheet(data);
        //3.在工作簿中添加工作表
        this.$XLSX.utils.book_append_sheet(workbook, sheet, '羊绒细度检测表'); //工作簿名称
        //4.输出工作表,由文件名决定的输出格式
        this.$XLSX.writeFile(workbook, '羊绒细度检测表(导出日期：' + this.$moment().format("YYYY年MM月DD日 HH时mm分ss秒 dddd") + ').xlsx'); // 保存的文件名
      },

      //导入Excel表格数据
      importExcel() {
        let obj = this.$refs.elementData
        let file = obj.files[0];
        if (!obj.files || file == undefined) return
        let $this = this //将vm的值赋值给变量$this
        {
          let reader = new FileReader();
          reader.onload = function (e) {
            let data = e.target.result;
            let tempData = $this.$XLSX.read(data, { type: 'binary' });
            $this.importData = JSON.stringify($this.$XLSX.utils.sheet_to_json(tempData.Sheets[tempData.SheetNames[0]]))
            $this.importExcelData($this.importData)
          };
          reader.readAsArrayBuffer(file);
          obj.value = null //防止多次导入同一个文件时函数不执行
        }
      },

      //为图表处理获取的数据
      handleData(data) {
        let thisYearNum = Number(this.$moment().format("YYYY")); // 获取当前的年份
        const goatData = [] // 羊只每年的信息
        let startYear = 2017 // 开始年份
        let filtrateTime = thisYearNum - startYear + 1 // 要循环筛选的次数
        const yearArr = [] // 折线图横坐标的类目名称
        for (let goatIndex = 0; goatIndex < filtrateTime; goatIndex++) {
          // 筛选出从2017年到今年的羊只重新排序后并放入goatData
          const tempGoatData = data.filter(goatObj => {
            return startYear == Number(goatObj.MEASUREMENT_DATE.slice(0, 4))
          })
          if (tempGoatData.length > 0) { // 如果筛选到了数据(有可能不止一条,这时会出现数据的年份对应错误)
            goatData.push(tempGoatData[0]) // 根据年份的先后重新排序
            yearArr.push(startYear) // 放入从2017年到今年有数据的年份
          }
          startYear++
        }
        const diameterArr = [] // 直径数组
        const diaStanDiffArr = [] // 直径标准差数组
        const cashmereLengthArr = [] // 长度数组
        const casLenStanDiffArr = [] // 长度标准差数组
        const casLenVarCoeffiArr = [] // 长度变异系数数组
        const treaNumArr = [] // 测量数数组
        // 将每一个要展示的值按顺序存入对应数组
        for (let index = 0; index < goatData.length; index++) {
          diameterArr.push(goatData[index].DIAMETER)
          diaStanDiffArr.push(goatData[index].D_DIFFERENCE)
          cashmereLengthArr.push(goatData[index].LENGTH)
          casLenStanDiffArr.push(goatData[index].L_DIFFERENCE)
          casLenVarCoeffiArr.push(goatData[index].L_CODEFFICIENT)
          treaNumArr.push(goatData[index].MEASUREMENT_NUMBER)
        }
        this.lineCharts(yearArr, diameterArr, diaStanDiffArr, cashmereLengthArr, casLenStanDiffArr, casLenVarCoeffiArr, treaNumArr)
      },

      // 羊只羊绒情况折线图
      lineCharts(yearArr, diameterArr, diaStanDiffArr, cashmereLengthArr, casLenStanDiffArr, casLenVarCoeffiArr, treaNumArr) {
        this.searchBySheepId = true; // 显示标题dom
        // 设置宿主对象的宽高
        this.$refs.lineCharts.style.width = 62.5 + 'rem'
        this.$refs.lineCharts.style.height = 28.125 + 'rem'
        this.$message({
          message: '向下滑动可查看查看此羊只历年羊绒细度信息分析图',
          center: true,
          type: 'success',
          duration: 8000
        });
        const lineChart = this.$echarts.init(this.$refs.lineCharts)
        const option = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['直径(μm)', '直径标准差', '长度(mm)', '长度标准差', '长度变异系数(%)', '测量数'],
            left: '10%'
          },
          grid: {
            left: '5%',
            right: '5%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              dataZoom: {
                yAxisIndex: "none"
              },
              dataView: {
                readOnly: false
              },
              magicType: {
                type: ["line", "bar"]
              },
              restore: {},
              saveAsImage: {}
            },
            right: '5%'
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              show: true
            },
            axisTick: {
              inside: true
            },
            data: yearArr
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: true
            },
          },
          series: [
            {
              name: '直径(μm)',
              type: 'line',
              stack: '直径(μm)',
              data: diameterArr
            },
            {
              name: '直径标准差',
              type: 'line',
              stack: '直径标准差',
              data: diaStanDiffArr
            },
            {
              name: '长度(mm)',
              type: 'line',
              stack: '长度(mm)',
              data: cashmereLengthArr
            },
            {
              name: '长度标准差',
              type: 'line',
              stack: '长度标准差',
              data: casLenStanDiffArr
            },
            {
              name: '长度变异系数(%)',
              type: 'line',
              stack: '长度变异系数(%)',
              data: casLenVarCoeffiArr
            },
            {
              name: '测量数',
              type: 'line',
              stack: '测量数',
              data: treaNumArr
            }
          ]
        };
        lineChart.setOption(option)
      }
    },
  }

</script>
<style Lang="less" scoped>
  * {
    color: #4b9100;
  }

  #checkPageButton {
    margin-right: 40px;
    width: 100px;
    height: 42px;
  }

  #checkPageButton+button {
    width: 100px;
    height: 42px;
  }

  .demo-table-expand {
    font-size: 10px;
  }

  .el-form>>>.el-form-item__label {
    width: 130px;
    color: #000000;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 23%;
  }

  #searchDialog>>>.el-dialog__body {
    padding-top: 0;
    padding-bottom: 0;
  }

  #headerArea {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>